<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <!-- Angular Include -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.4.7/angular-animate.min.js"></script>

    <!-- Bootstrap Include -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 

    <!-- Mobiscroll JS and CSS Includes -->
    
    <link href="css/mobiscroll.custom-3.0.0-beta4.min.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.custom-3.0.0-beta4.min.js" type="text/javascript"></script>

    <style type="text/css">
    /*****************************************************************/
    /* Demo Page styling, you can ignore this in your implementation */
    
    body {
        margin: 0;
        padding: 0;
        font-family: arial, verdana, sans-serif;
        -webkit-font-smoothing: antialiased;
    }
    
    input,
    select {
        width: 100%;
        margin: 0 0 10px 0;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 0;
        background: #fff;
        font-family: arial, verdana, sans-serif;
        text-shadow: none;
        color: #000;
        font-size: 15px;
        -webkit-appearance: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    button {
        display: inline-block;
        text-decoration: none;
        padding: 0.8em 2.6em;
        margin: 20px 10px 0 0;
        outline: 0;
        border: 0;
        overflow: visible;
        cursor: pointer;
        color: #fff;
        background: #5185a8;
        font-family: arial, verdana, sans-serif;
        font-size: 14px;
        font-weight: 100;
    }
    
    button:hover {
        background: #34566d;
    }
    
    .header {
        padding: .625em;
        background: #5185a8;
    }
    
    .header h1 {
        margin: 0;
        padding: 0;
        color: #fff;
        text-align: center;
        font-size: 1.25em;
        font-weight: bold;
        text-shadow: 1px 1px 1px #000;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    
    .demo-main,
    .demo-wrapper {
        padding: 1em;
    }
    
    .demo-iframe {
        padding: 10px 10px 10px 10px;
        text-shadow: none;
    }
    /* Demo page styling END */
    /*************************/
    
        /* Basic usage demo styling */
    .demo-stars {
        padding: 0!important;
    }
    
    .md-stars .md-products {
        list-style: none;
        margin: 0;
        padding: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -ms-touch-action: none;
    }
    
    .md-stars .md-products li {
        position: relative;
        list-style: none;
        margin: 0;
        padding: 0;
        background: #f0f0f0;
        border-bottom: 1px solid #b1b1b1;
        border-top: 1px solid #fff;
    }
    
    .md-stars .md-products li h3 {
        margin: 5px 0;
        font-weight: normal;
        font-size: initial;
    }
    
    .md-stars .md-products li p {
        margin: 5px 0;
        color: #717171;
    }
    
    .md-stars .md-products li .md-product {
        height: 50px;
        padding: 5px 65px 5px 60px;
        color: #333;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }
    
    .md-stars .md-products li .md-active {
        background: #ddd;
    }
    
    .md-stars .md-products li .md-rate {
        position: absolute;
        right: 0;
        top: 0;
        width: 60px;
        height: 60px;
        text-align: right;
    }
    
    .md-stars .md-products li .md-rating {
        padding-right: 10px;
        font-size: 17px;
        line-height: 60px;
    }
    
    .md-stars .md-products img {
        position: absolute;
        left: 0;
        top: 0;
        width: 60px;
        height: 60px;
        border: 0;
    }
    
    @media (max-width: 960px) {
        .demo-cont-c .md-stars {
            padding: 0;
        }
        .demo-cont-c .demo-phone-c .demo-phone {
            margin: 0 -20px 40px;
        }
    }

    /* Image Only demo styling */
    .md-image-fruit .dw-ul .dw-li .mbsc-img-w {
        text-align: center;
    }
    
    .md-image-fruit .mbsc-sc-whl-sc .mbsc-sc-itm .mbsc-img-w {
        text-align: center;
    }

    /* Basic usage demo styling */
    .md-color {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-indent: 40px;
        color: #000;
        border: 1px solid #000;
        background: #ff0000;
        margin: 5px 0;
        white-space: nowrap;
    }
    
    .demo-display-inline .md-color {
        display: block;
        width: auto;
        height: auto;
        text-indent: 0;
        margin: 0;
        border: 0;
        background: none !important;
    }
    
    .demo-display-inline .md-color .mbsc-fr-inline,
    .demo-display-inline .md-color .dw-inline {
        text-align: left;
    }

    /* Two inputs demo styling */
    .demo-display-inline .demo-twoinputs input,
    .demo-display-inline .demo-twoinputs label,
    .demo-display-inline .demo-twoinputs br {
        display: none;
    }

    /* Create, remove, update demo styling */
    .demo-comp-listview .mbsc-lv-fixed-header-ctx { text-shadow: none; }
    .demo-comp-listview .demo-iframe { padding: 0; }
    .demo-comp-listview .demo-note { margin: 10px; }
    .md-demo-note {
        cursor: pointer;
    }
    
    .md-wo-list {
        line-height: 30px;
        text-shadow: none;
    }
    
    .md-wo-list li {
        line-height: normal;
    }
    
    .md-wo-status {
        font-size: 10px;
        -webkit-backface-visibility: hidden;
    }
    
    .md-wo-empty {
        padding: 10px;
    }

    /* Sort handle demo styling */
    .demo-comp-listview .mbsc-lv-fixed-header-ctx { text-shadow: none; }
    .demo-comp-listview .demo-iframe { padding: 0; }
    .demo-comp-listview .demo-note { margin: 10px; }
    .demo-sorthandle ul {
        font-size: 16px;
    }

    /* Action menu demo styling */
    .demo-comp-listview .mbsc-lv-fixed-header-ctx { text-shadow: none; }
    .demo-comp-listview .demo-iframe { padding: 0; }
    .demo-comp-listview .demo-note { margin: 10px; }
    .demo-actionmenu ul {
        font-size: 18px;
    }
    
    .demo-notification {
        position: absolute;
        width: 100%;
        z-index: 100001;
        left: 0;
        bottom: 20px;
        text-align: center;
        opacity: 0;
        pointer-events: none;
        -webkit-transition: opacity 200ms;
        -moz-transition: opacity 200ms;
        transition: opacity 200ms;
    }
    
    .demo-notification-fixed {
        position: fixed;
    }
    
    .demo-notification-i {
        display: inline-block;
        background: #000;
        color: #fff;
        line-height: 20px;
        text-shadow: none;
        box-shadow: 0 0 3px rgba(0, 0, 0, .5);
        border-radius: 3px;
        padding: 5px;
    }
    
    .demo-notification-v {
        opacity: 1;
    }

    /* Currency demo styling */
    .demo-currency {
        padding: 0!important;
    }
    
    .md-stepper-np .md-demo {
        text-align: center;
    }
    
    .md-stepper-np .md-demo .mbsc-desc {
        font-size: 16px;
        padding-bottom: 16px;
    }
    
    .md-stepper-np .md-demo .mbsc-btn {
        margin-top: 36px;
    }
    
    .md-stepper-np .md-title {
        margin-top: 40px;
    }
    
    .md-stepper-np {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    
    .md-stepper-np .mbsc-segmented {
        left: 50%;
        margin-left: -122px;
    }
    
    .md-stepper-np.mbsc-form .mbsc-stepper .mbsc-segmented-item {
        width: 4.375em;
    }
    
    .md-stepper-np.mbsc-form .mbsc-stepper .mbsc-segmented-item:nth-child(3) {
        width: 6.25em;
    }
    
    .md-stepper-np.mbsc-form .mbsc-stepper input {
        left: 5em;
        width: 7.1428em;
    }

    /* Tab menu demo styling */
    .demo-comp-menustrip #demombscr { position: static; }
    .demo-comp-menustrip .demo-iframe { padding: 0; min-height: 300px; }
    .demo-comp-menustrip .demo-phone-np .demo-phone { margin: 0 -20px -20px -20px; }
    .md-tab-h {
        display: none;
    }
    
    .md-tabs-sel {
        display: block;
    }
    
    .demo-tabs .md-tabs-sel {
        display: block;
    }
    
    .md-app-ic {
        position: absolute;
        top: 50%;
        left: 15px;
        margin-top: -12px;
        font-size: 20px;
        line-height: 24px;
    }
    
    .md-app-detail {
        display: block;
        overflow: hidden;
    }
    
    .md-app-size {
        font-size: 10px;
        display: block;
        opacity: .6;
        float: left;
    }
    
    .md-app-date {
        font-size: 10px;
        display: block;
        opacity: .6;
        float: right;
    }
    
    .md-apps-ul li.mbsc-lv-item {
        padding-left: 50px;
    }
    
    .demo-display-top .md-apps-ul {
        padding-top: 47px;
    }
    
    .demo-display-top .mbsc-lv-android .md-apps-ul {
        padding-top: 34px;
    }
    
    .demo-display-top .mbsc-lv-android-holo .md-apps-ul {
        padding-top: 45px;
    }
    
    .demo-display-top .mbsc-lv-bootstrap .md-apps-ul {
        padding-top: 36px;
    }
    
    .demo-display-top .mbsc-lv-ios .md-apps-ul {
        padding-top: 42px;
    }
    
    .demo-display-top .mbsc-lv-ios-classic .md-apps-ul {
        padding-top: 38px;
    }
    
    .demo-display-top .mbsc-lv-jqm .md-apps-ul {
        padding-top: 33px;
    }
    
    .demo-display-top .mbsc-lv-sense-ui .md-apps-ul {
        padding-top: 39px;
    }
    
    .demo-display-top .mbsc-lv-sense .md-apps-ul {
        padding-top: 39px;
    }
    
    .demo-display-top .mbsc-lv-wp .md-apps-ul {
        padding-top: 75px;
    }
    
    .demo-display-bottom .demo-tabs {
        padding-bottom: 75px;
    }

    /* Dialog demo styling */
    .md-text-center {
        text-align: center;
    }
    
    .md-dialog {
        width: 260px;
        margin: 0 auto;
    }

    /* Alert message demo styling */
    .md-body {
        max-width: 280px;
        margin: 0 auto;
    }

    /* Progress demo styling */
    .md-progress-demo .md-demo .mbsc-progress-cont {
        padding: 1em;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .md-progress-demo .md-upload.mbsc-progress,
    .md-progress-demo .md-demo.mbsc-progress {
        overflow: hidden;
    }
    
    .md-progress-demo .md-demo .mbsc-progress-step-label {
        overflow: visible;
    }
    
    .md-progress-demo.mbsc-wp .mbsc-progress {
        min-height: 3.75em;
    }
    
    .md-progress-demo .md-upload .mbsc-progress-cont {
        padding-right: 1em;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    </style>

    <script>
    // -------------------------------------------------------------------
    // Demo page code START, you can ignore this in your implementation
    angular.element(document).ready(function () {
        angular.bootstrap(mobiscroll.$('#main'), ['mainModule']);
    });

    angular.module('mainModule', [])
        .controller('mainController', ['$scope', function ($scope) {
            var $ = mobiscroll.$,
                settings = ['theme', 'display', 'language'],
                noDisplay = {
                    listview: true,
                    forms: true,
                    menustrip: 'partial'
                };

            function demoPageConfigurator($provide) {
                $provide.decorator('$rootScope', ['$delegate', function ($delegate) {
                    for (var i = 0; i < settings.length; i++) {
                        $delegate[settings[i]] = $scope[settings[i]];
                    }
                    return $delegate;
                }]);
            }

            function changeDemo(newValue) {
                var demo,
                    element;

                for (demo in $scope.alreadyBooted) {
                    $('#demo_cont_' + demo).addClass('ng-hide');
                }

                if (newValue) {
                    $scope.component = newValue.split(/(?=[A-Z])/)[0];

                    if (noDisplay[$scope.component] == 'partial' && ($scope.display === 'modal' || $scope.display === 'bubble')) {
                        $scope.display = undefined;
                    }

                    if ($scope.alreadyBooted[newValue]) {
                        $('#demo_cont_' + newValue).remove();
                        $('body').append($($scope.templates[newValue]));
                        element = $('#demo_cont_' + newValue);
                    } else {
                        $scope.alreadyBooted[newValue] = true;
                        element = $('#demo_cont_' + newValue);
                        $scope.templates[newValue] = element[0].outerHTML;
                    }

                    element.removeClass('ng-hide');
                    angular.module(newValue).config(demoPageConfigurator);
                    angular.bootstrap(element, [newValue]);
                }
            }

            $scope.alreadyBooted = {};
            $scope.templates = {};
            $scope.$watch('demo', changeDemo);

            $scope.$watchGroup(settings, function () {
                changeDemo($scope.demo);
            });

            $scope.noDisplay = function () {
                return noDisplay[$scope.component];
            };

        }]);
    // Demo page code END
    // -------------------------------------------------------------------

            // Basic usage date demo script
        angular
            .module('datetimeDate', ['mobiscroll-datetime'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode         // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/datetime#!opt-mode
                };
        
            }]);

        // Datetime with invalids demo script
        angular
            .module('datetimeInvalid', ['mobiscroll-datetime'])
            .controller('demoController', ['$scope', function ($scope) {
        
                var now = new Date();
        
                $scope.settings = {
                    theme: $scope.theme,                                              // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                                                // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                                              // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                                                    // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/datetime#!opt-mode
                    min: new Date(now.getFullYear(), now.getMonth(), now.getDate()),  // More info about min: https://docs.mobiscroll.com/3-0-0_beta4/angular/datetime#!opt-min
                    invalid: ['w0', 'w6', '5/1', '12/24', '12/25'],                   // More info about invalid: https://docs.mobiscroll.com/3-0-0_beta4/angular/datetime#!opt-invalid
                    dateOrder: 'Mddyy',                                               // More info about dateOrder: https://docs.mobiscroll.com/3-0-0_beta4/angular/datetime#!localization-dateOrder
                    timeWheels: 'HHii'                                                // More info about timeWheels: https://docs.mobiscroll.com/3-0-0_beta4/angular/datetime#!localization-timeWheels
                };
        
            }]);

        // Basic usage time demo script
        angular
            .module('datetimeTime', ['mobiscroll-datetime'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/datetime#!opt-mode
                    headerText: false,    // More info about headerText: https://docs.mobiscroll.com/3-0-0_beta4/angular/datetime#!opt-headerText
                    maxWidth: 90          // More info about maxWidth: https://docs.mobiscroll.com/3-0-0_beta4/angular/datetime#!opt-maxWidth
                };
        
            }]);

        // Basic usage demo script
        angular
            .module('selectBasic', ['mobiscroll-select'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/select#!opt-mode
                    minWidth: 200         // More info about minWidth: https://docs.mobiscroll.com/3-0-0_beta4/angular/select#!opt-minWidth
                };
        
            }]);

        // Group options demo script
        angular
            .module('selectGroupselect', ['mobiscroll-select'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,      // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,    // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,          // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/select#!opt-mode
                    label: 'City',          // More info about label: https://docs.mobiscroll.com/3-0-0_beta4/angular/select#!opt-label
                    group: true,            // More info about group: https://docs.mobiscroll.com/3-0-0_beta4/angular/select#!opt-group
                    groupLabel: 'Country',  // More info about groupLabel: https://docs.mobiscroll.com/3-0-0_beta4/angular/select#!opt-groupLabel
                    width: [100, 170]       // More info about width: https://docs.mobiscroll.com/3-0-0_beta4/angular/select#!opt-width
                };
        
            }]);

        // Basic usage demo script
        angular
            .module('ratingStars', ['mobiscroll-rating'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.data = [{
                    imgsrc: 'product1.png',
                    name: 'Chocolate sticks',
                    id: '1',
                    rating: 4
                }, {
                    imgsrc: 'product2.png',
                    name: 'Chocolate chips',
                    id: '2',
                    rating: 4
                }, {
                    imgsrc: 'product3.png',
                    name: 'Milk chocolate',
                    id: '3',
                    rating: 3
                }, {
                    imgsrc: 'product4.png',
                    name: 'Chocolate cupcake',
                    id: '4',
                    rating: 5
                }, {
                    imgsrc: 'product5.png',
                    name: 'Chocolate with air',
                    id: '5',
                    rating: 5
                }, {
                    imgsrc: 'product6.png',
                    name: 'Chocolate truffles',
                    id: '6',
                    rating: 3
                }];
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/rating#!opt-mode
                    label: 'Rate Item'    // More info about label: https://docs.mobiscroll.com/3-0-0_beta4/angular/rating#!opt-label
                };
        
            }]);

        // Grades demo script
        angular
            .module('ratingGrades', ['mobiscroll-rating'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/rating#!opt-mode
                    style: 'grade',       // More info about style: https://docs.mobiscroll.com/3-0-0_beta4/angular/rating#!opt-style
                    label: 'Rating'       // More info about label: https://docs.mobiscroll.com/3-0-0_beta4/angular/rating#!opt-label
                };
        
            }]);

        // Distance demo script
        angular
            .module('measurementDistance', ['mobiscroll-measurement'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode         // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/measurement#!opt-mode
                };
        
            }]);

        // Speed demo script
        angular
            .module('measurementSpeed', ['mobiscroll-measurement'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode         // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/measurement#!opt-mode
                };
        
            }]);

        // Temperature demo script
        angular
            .module('measurementTemperature', ['mobiscroll-measurement'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode         // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/measurement#!opt-mode
                };
        
            }]);

        // Mass demo script
        angular
            .module('measurementMass', ['mobiscroll-measurement'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode         // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/measurement#!opt-mode
                };
        
            }]);

        // Force demo script
        angular
            .module('measurementForce', ['mobiscroll-measurement'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode         // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/measurement#!opt-mode
                };
        
            }]);

        // Basic usage demo script
        angular
            .module('listTreelist', ['mobiscroll-list'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,                      // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                        // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                      // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                            // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/list#!opt-mode
                    width: [90, 160, 170],                    // More info about width: https://docs.mobiscroll.com/3-0-0_beta4/angular/list#!opt-width
                    placeholder: 'Please Select ...',         // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta4/angular/list#!opt-placeholder
                    labels: ['Region', 'Supervisor', 'Tech']  // More info about labels: https://docs.mobiscroll.com/3-0-0_beta4/angular/list#!opt-labels
                };
        
            }]);

        // Image and Text demo script
        angular
            .module('imageText', ['mobiscroll-image'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.data = [{
                    name: 'BMW',
                    imgsrc: 'BMW_logo.png',
                    p: 'BMW'
                }, {
                    name: 'Dacia',
                    imgsrc: 'Dacia_logo.png',
                    p: 'Dacia'
                }, {
                    name: 'Ferrari',
                    imgsrc: 'ferrari_logo.png',
                    p: 'Ferrari'
                }, {
                    name: 'Mercedes',
                    imgsrc: 'mercedes_logo.png',
                    p: 'Mercedes'
                }, {
                    name: 'Opel',
                    imgsrc: 'opel_logo.png',
                    p: 'Opel'
                }, {
                    name: 'Renault',
                    imgsrc: 'renault_logo.png',
                    p: 'Renault'
                }, {
                    name: 'Volkswagen',
                    imgsrc: 'volkswagen_logo.png',
                    p: 'Volkswagen'
                }, {
                    name: 'Jaguar',
                    imgsrc: 'Jaguar_logo.png',
                    p: 'Jaguar'
                }, {
                    name: 'Lotus',
                    imgsrc: 'Lotus_logo.png',
                    p: 'Lotus'
                }, {
                    name: 'Chevrolet',
                    imgsrc: 'Chevrolet_logo.png',
                    p: 'Chevrolet'
                }, {
                    name: 'Ford',
                    imgsrc: 'vFord_logo.png',
                    p: 'Ford'
                }, {
                    name: 'Citroen',
                    imgsrc: 'Citroen_logo.png',
                    p: 'Citroen'
                }, {
                    name: 'Porsche',
                    imgsrc: 'Porsche_logo.png',
                    p: 'Porsche'
                }, {
                    name: 'Audi',
                    imgsrc: 'Audi_logo.png',
                    p: 'Audi'
                }, {
                    name: 'Seat',
                    imgsrc: 'Seat_logo.png',
                    p: 'Seat'
                }];
        
                $scope.settings = {
                    theme: $scope.theme,               // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                 // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,               // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                     // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-mode
                    placeholder: 'Please Select ...',  // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-placeholder
                    labels: ['Make'],                  // More info about labels: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-labels
                    enhance: true,                     // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-enhance
                    defaultValue: ['Ferrari']          // More info about defaultValue: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-defaultValue
                };
        
            }]);

        // Image Only demo script
        angular
            .module('imageBasic', ['mobiscroll-image'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.data = [{
                    name: '1',
                    imgsrc: 'fruit-1.png'
                }, {
                    name: '2',
                    imgsrc: 'fruit-2.png'
                }, {
                    name: '3',
                    imgsrc: 'fruit-3.png'
                }, {
                    name: '4',
                    imgsrc: 'fruit-4.png'
                }, {
                    name: '5',
                    imgsrc: 'fruit-5.png'
                }, {
                    name: '6',
                    imgsrc: 'fruit-1.png'
                }, {
                    name: '7',
                    imgsrc: 'fruit-2.png'
                }, {
                    name: '8',
                    imgsrc: 'fruit-3.png'
                }, {
                    name: '9',
                    imgsrc: 'fruit-4.png'
                }, {
                    name: '10',
                    imgsrc: 'fruit-5.png'
                }, {
                    name: '11',
                    imgsrc: 'fruit-1.png'
                }, {
                    name: '12',
                    imgsrc: 'fruit-2.png'
                }, {
                    name: '13',
                    imgsrc: 'fruit-3.png'
                }, {
                    name: '14',
                    imgsrc: 'fruit-4.png'
                }, {
                    name: '15',
                    imgsrc: 'fruit-5.png'
                }, {
                    name: '16',
                    imgsrc: 'fruit-1.png'
                }, {
                    name: '17',
                    imgsrc: 'fruit-2.png'
                }, {
                    name: '18',
                    imgsrc: 'fruit-3.png'
                }, {
                    name: '19',
                    imgsrc: 'fruit-4.png'
                }, {
                    name: '20',
                    imgsrc: 'fruit-5.png'
                }];
        
                $scope.settings = {
                    theme: $scope.theme,                // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                      // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-mode
                    cssClass: 'md-image-fruit',
                    labels: ['Select Favorite Fruit'],  // More info about labels: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-labels
                    placeholder: 'Please Select ...',   // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-placeholder
                    width: 200,                         // More info about width: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-width
                    enhance: true                       // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-enhance
                };
        
            }]);

        // Unordered list demo script
        angular
            .module('listUnordered', ['mobiscroll-list'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,               // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                 // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,               // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                     // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/list#!opt-mode
                    labels: ['Ingredients'],           // More info about labels: https://docs.mobiscroll.com/3-0-0_beta4/angular/list#!opt-labels
                    placeholder: 'Please Select ...',  // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta4/angular/list#!opt-placeholder
                    width: 200                         // More info about width: https://docs.mobiscroll.com/3-0-0_beta4/angular/list#!opt-width
                };
        
            }]);

        // With time scroller demo script
        angular
            .module('calendarTime', ['mobiscroll-calendar'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,             // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,               // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,             // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                   // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/calendar#!opt-mode
                    controls: ['calendar', 'time'],  // More info about controls: https://docs.mobiscroll.com/3-0-0_beta4/angular/calendar#!opt-controls
                    showScrollArrows: true           // More info about showScrollArrows: https://docs.mobiscroll.com/3-0-0_beta4/angular/calendar#!opt-showScrollArrows
                };
        
            }]);

        // Basic usage demo script
        angular
            .module('calendarBasic', ['mobiscroll-calendar'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode         // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/calendar#!opt-mode
                };
        
            }]);

        // Multi day select demo script
        angular
            .module('calendarMultiday', ['mobiscroll-calendar'])
            .controller('demoController', ['$scope', function ($scope) {
        
                var now = new Date(),
                    year = now.getFullYear(),
                    month = now.getMonth();
        
                $scope.settings = {
                    theme: $scope.theme,                                                                           // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                                                                             // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                                                                           // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                                                                                 // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/calendar#!opt-mode
                    counter: true,                                                                                 // More info about counter: https://docs.mobiscroll.com/3-0-0_beta4/angular/calendar#!opt-counter
                    select: 'multiple',                                                                            // More info about select: https://docs.mobiscroll.com/3-0-0_beta4/angular/calendar#!opt-select
                    defaultValue: [new Date(year, month, 1), new Date(year, month, 2), new Date(year, month, 10)]  // More info about defaultValue: https://docs.mobiscroll.com/3-0-0_beta4/angular/calendar#!opt-defaultValue
                };
        
            }]);

        // Multiple select demo script
        angular
            .module('selectMultiple', ['mobiscroll-select'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/select#!opt-mode
                    minWidth: 200         // More info about minWidth: https://docs.mobiscroll.com/3-0-0_beta4/angular/select#!opt-minWidth
                };
        
            }]);

        // Basic usage demo script
        angular
            .module('timespanBasic', ['mobiscroll-timespan'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/timespan#!opt-mode
                    wheelOrder: 'iiss'    // More info about wheelOrder: https://docs.mobiscroll.com/3-0-0_beta4/angular/timespan#!opt-wheelOrder
                };
        
            }]);

        // Day/Hour/Minute span demo script
        angular
            .module('timespanDhm', ['mobiscroll-timespan'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/timespan#!opt-mode
                    wheelOrder: 'ddhhii'  // More info about wheelOrder: https://docs.mobiscroll.com/3-0-0_beta4/angular/timespan#!opt-wheelOrder
                };
        
            }]);

        // Countdown demo script
        angular
            .module('timerCountdown', ['mobiscroll-timer'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,     // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,       // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,     // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,           // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/timer#!opt-mode
                    targetTime: 10,          // More info about targetTime: https://docs.mobiscroll.com/3-0-0_beta4/angular/timer#!opt-targetTime
                    maxWheel: 'minutes',     // More info about maxWheel: https://docs.mobiscroll.com/3-0-0_beta4/angular/timer#!opt-maxWheel
                    minWidth: 100,           // More info about minWidth: https://docs.mobiscroll.com/3-0-0_beta4/angular/timer#!opt-minWidth
                    onFinish: function () {  // More info about onFinish: https://docs.mobiscroll.com/3-0-0_beta4/angular/timer#!event-onFinish
                        alert('Countdown finished!');
                    }
                };
        
            }]);

        // Basic usage demo script
        	angular
        	    .module('colorHx', ['mobiscroll-color'])
        	    .controller('demoController', ['$scope', function ($scope) {
        
        	        $scope.settings = {
        	            theme: $scope.theme,                    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                       // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                     // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                           // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/color#!opt-mode
        	            onBeforeShow: function (event, inst) {  // More info about onBeforeShow: https://docs.mobiscroll.com/3-0-0_beta4/angular/color#!event-onBeforeShow
        	                if (this.innerHTML) {
        	                    inst.setVal(this.innerHTML);
        	                } else {
        	                    this.innerHTML = '#colorHx-ff0000';
        	                    this.style.background = 'red';
        	                }
        	            },
        	            onSet: function (event, inst) {         // More info about onSet: https://docs.mobiscroll.com/3-0-0_beta4/angular/color#!event-onSet
        	                this.innerHTML = event.valueText;
        	                this.style.background = event.valueText;
        	            }
        	        };
        
        	    }]);

        // Basic usage demo script
        angular
            .module('rangeBasic', ['mobiscroll-range'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,                                          // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                                            // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                                          // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                                                // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/range#!opt-mode
                    defaultValue: [new Date(2014, 3, 10), new Date(2014, 3, 17)]  // More info about defaultValue: https://docs.mobiscroll.com/3-0-0_beta4/angular/range#!opt-defaultValue
                };
        
            }]);

        // Time range demo script
        angular
            .module('rangeTime', ['mobiscroll-range'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/range#!opt-mode
                    controls: ['time'],   // More info about controls: https://docs.mobiscroll.com/3-0-0_beta4/angular/range#!opt-controls
                    maxWidth: 100         // More info about maxWidth: https://docs.mobiscroll.com/3-0-0_beta4/angular/range#!opt-maxWidth
                };
        
            }]);

        // Two inputs demo script
        angular
            .module('rangeTwoinputs', ['mobiscroll-range'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,                      // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                        // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                      // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                            // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/range#!opt-mode
                    startInput: '#rangeTwoinputs-startDate',  // More info about startInput: https://docs.mobiscroll.com/3-0-0_beta4/angular/range#!opt-startInput
                    endInput: '#rangeTwoinputs-endDate'       // More info about endInput: https://docs.mobiscroll.com/3-0-0_beta4/angular/range#!opt-endInput
                };
        
            }]);

        // Events demo script
        angular
            .module('eventcalendarEvent', ['mobiscroll-calendar'])
            .controller('demoController', ['$scope', function ($scope) {
        
                var now = new Date();
        
                $scope.events = [{
                    d: new Date(now.getFullYear(), now.getMonth(), 8, 8, 0),
                    text: 'Green box to post office',
                    color: '#eventcalendarEvent-6e7f29'
                }, {
                    d: new Date(now.getFullYear(), now.getMonth(), 8, 8, 45),
                    text: 'Quick mtg. with Martin',
                    color: '#eventcalendarEvent-de3d83'
                }, {
                    d: new Date(now.getFullYear(), now.getMonth(), 8, 9, 30),
                    text: 'Product team mtg.',
                    color: '#eventcalendarEvent-f67944'
                }, {
                    d: new Date(now.getFullYear(), now.getMonth(), 8, 11, 0),
                    text: 'Stakeholder mtg.',
                    color: '#eventcalendarEvent-f67944'
                }, {
                    d: new Date(now.getFullYear(), now.getMonth(), 8, 12, 30),
                    text: 'Lunch @ Butcher\'s',
                    color: '#eventcalendarEvent-00aabb'
                }, {
                    d: new Date(now.getFullYear(), now.getMonth(), 8, 15, 0),
                    text: 'General orientation',
                    color: '#eventcalendarEvent-f67944'
                }, {
                    d: (now.getMonth() + 1) + '/14',
                    text: 'Dexter Birthday',
                    color: '#eventcalendarEvent-37bbe4'
                }, {
                    d: (now.getMonth() + 1) + '/5',
                    text: 'Luke Birthday',
                    color: '#eventcalendarEvent-37bbe4'
                }, {
                    d: 'w3',
                    text: 'Employment (Semi-weekly)',
                    color: '#eventcalendarEvent-635045'
                }, {
                    d: 'w5',
                    text: 'Employment (Semi-weekly)',
                    color: '#eventcalendarEvent-635045'
                }, {
                    start: new Date(now.getFullYear(), now.getMonth(), 26),
                    end: new Date(now.getFullYear(), now.getMonth(), 31),
                    text: 'Dean OFF',
                    color: '#eventcalendarEvent-e7b300'
                }, {
                    start: new Date(now.getFullYear(), (now.getMonth() + 1), 5),
                    end: new Date(now.getFullYear(), (now.getMonth() + 1), 14),
                    text: 'Mike OFF',
                    color: '#eventcalendarEvent-e7b300'
                }, {
                    d: '11/2',
                    text: 'File Form 720 for the third quarter',
                    color: '#eventcalendarEvent-a63e14'
                }, {
                    d: '11/2',
                    text: 'File Form 730 and pay tax on wagers accepted during September',
                    color: '#eventcalendarEvent-a63e14'
                }, {
                    d: '11/2',
                    text: 'File Form 2290 and pay the tax for vehicles first used during September',
                    color: '#eventcalendarEvent-a63e14'
                }, {
                    d: '11/2',
                    text: 'File Form 941 for the third quarter',
                    color: '#eventcalendarEvent-a63e14'
                }, {
                    d: '11/2',
                    text: 'Deposit FUTA owed through Sep if more than $500',
                    color: '#eventcalendarEvent-a63e14'
                }, {
                    d: '11/30',
                    text: 'Deposit payroll tax for payments on Nov 21-24 if the semiweekly deposit rule applies',
                    color: '#eventcalendarEvent-a63e14'
                }, {
                    d: '11/30',
                    text: 'File Form 730 and pay tax on wagers accepted during October',
                    color: '#eventcalendarEvent-a63e14'
                }, {
                    d: '11/30',
                    text: 'File Form 2290 and pay the tax for vehicles first used during October',
                    color: '#eventcalendarEvent-a63e14'
                }];
        
                $scope.settings = {
                    theme: $scope.theme,           // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,             // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,           // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                    layout: 'liquid',              // More info about layout: https://docs.mobiscroll.com/3-0-0_beta4/angular/eventcalendar#!opt-layout
                    firstDay: 1,                   // More info about firstDay: https://docs.mobiscroll.com/3-0-0_beta4/angular/eventcalendar#!localization-firstDay
                    yearChange: true,              // More info about yearChange: https://docs.mobiscroll.com/3-0-0_beta4/angular/eventcalendar#!opt-yearChange
                    calendarScroll: 'horizontal',  // More info about calendarScroll: https://docs.mobiscroll.com/3-0-0_beta4/angular/eventcalendar#!opt-calendarScroll
                    showOuterDays: true,           // More info about showOuterDays: https://docs.mobiscroll.com/3-0-0_beta4/angular/eventcalendar#!opt-showOuterDays
                    showEventCount: true           // More info about showEventCount: https://docs.mobiscroll.com/3-0-0_beta4/angular/eventcalendar#!opt-showEventCount
                };
        
            }]);

        // Create, remove, update demo script
        angular
            .module('listviewUpdate', ['mobiscroll-listview'])
            .controller('demoController', ['$scope', function ($scope) {
                
                var ids = 6;
        
                $scope.data = [{
                    id: 1,
                    title: 'Work order #listviewUpdate-0001',
                    status: 'Assigned'
                }, {
                    id: 2,
                    title: 'Work order #listviewUpdate-0002',
                    status: 'Assigned'
                }, {
                    id: 3,
                    title: 'Work order #listviewUpdate-0003',
                    status: 'Assigned'
                }, {
                    id: 4,
                    title: 'Work order #listviewUpdate-0004',
                    status: 'Assigned'
                }, {
                    id: 5,
                    title: 'Work order #listviewUpdate-0005',
                    status: 'Assigned'
                }, {
                    id: 6,
                    title: 'Work order #listviewUpdate-0006',
                    status: 'Assigned'
                }];
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                    sortable: true,       // More info about sortable: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-sortable
                    iconSlide: true,      // More info about iconSlide: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-iconSlide
                    striped: true,        // More info about striped: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-striped
                    stages: [{            // More info about stages: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-stages
                        percent: 25,
                        color: 'crimson',
                        icon: 'checkmark',
                        text: 'Complete',
                        action: function (event, inst) {
                            event.target.querySelector('.md-wo-status').innerHTML = 'Completed';
                        }
                    }, {
                        percent: -50,
                        color: 'red',
                        icon: 'remove',
                        text: 'Delete',
                        confirm: true,
                        action: function (event, inst) {
                            inst.remove(event.target);
                            return false;
                        }
                    }, {
                        percent: 50,
                        color: 'green',
                        icon: 'plus',
                        text: 'Spawn',
                        undo: true,       // More info about undo: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!methods-undo
                        action: function (event, inst) {
                            inst.add(++ids, 'Work order #listviewUpdate-000' + ids + ' created from WO #listviewUpdate-000' + event.target.getAttribute('data-id') + '<div class="md-wo-status">Assigned</div>', event.index + 1);
                        }
                    }, {
                        percent: -25,
                        color: 'olive',
                        icon: 'clock',
                        text: 'Pending',
                        action: function (event, inst) {
                            event.target.querySelector('.md-wo-status').innerHTML = 'Pending';
                        }
                    }]
                };
        
                $scope.reload = function () {
                    window.location.reload();
                };
        
            }]);

        // Sort handle demo script
        angular
            .module('listviewSorthandle', ['mobiscroll-listview'])
            .controller('demoController', ['$scope', function ($scope) {
                
                $scope.data = [{
                    imgsrc: 'm1.png',
                    h3: 'Barry Lyon',
                    p: '(202) 555-0193'
                }, {
                    imgsrc: 'f1.png',
                    h3: 'Hortense Tinker',
                    p: '(202) 555-0127'
                }, {
                    imgsrc: 'm2.png',
                    h3: 'Carl Hambledon',
                    p: '(202) 555-0147'
                }, {
                    imgsrc: 'f2.png',
                    h3: 'Arlene Sharman',
                    p: '(202) 555-0190'
                }, {
                    imgsrc: 'm3.png',
                    h3: 'Noble Blythe',
                    p: '(202) 555-0176'
                }, {
                    imgsrc: 'f3.png',
                    h3: 'Angelica Geary',
                    p: '(202) 555-0107'
                }, {
                    imgsrc: 'm4.png',
                    h3: 'Lowell Christophers',
                    p: '(202) 555-0120'
                }, {
                    imgsrc: 'f4.png',
                    h3: 'Leilah Gregory',
                    p: '(202) 555-0189'
                }];
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                    swipe: false,         // More info about swipe: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-swipe
                    sortable: {           // More info about sortable: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-sortable
                        handle: 'right'
                    },
                    enhance: true         // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-enhance
                };
        
            }]);

        // Action menu demo script
        angular
            .module('listviewActionmenu', ['mobiscroll-listview'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.data = [{
                    type: 'folder',
                    icon: 'folder',
                    name: 'Music',
                    children: [{
                        type: 'music',
                        icon: 'music',
                        name: 'Track1'
                    }, {
                        type: 'music',
                        icon: 'music',
                        name: 'Track2'
                    }, {
                        type: 'music',
                        icon: 'music',
                        name: 'Track3'
                    }]
                }, {
                    type: 'folder',
                    icon: 'folder',
                    name: 'Photos',
                    children: [{
                        type: 'picture',
                        icon: 'image2',
                        name: 'Image 1'
                    }, {
                        type: 'picture',
                        icon: 'image2',
                        name: 'Image 2'
                    }, {
                        type: 'picture',
                        icon: 'image2',
                        name: 'Image 3'
                    }]
                }, {
                    type: 'folder',
                    icon: 'folder',
                    name: 'Videos',
                    children: [{
                        type: 'movie',
                        icon: 'play',
                        name: 'Movie 1'
                    }, {
                        type: 'movie',
                        icon: 'play',
                        name: 'Movie 2'
                    }, {
                        type: 'movie',
                        icon: 'play',
                        name: 'Movie 3'
                    }]
                }, {
                    type: 'picture',
                    icon: 'image2',
                    name: 'Image1'
                }, {
                    type: 'picture',
                    icon: 'image2',
                    name: 'Image2'
                }, {
                    type: 'picture',
                    icon: 'image2',
                    name: 'Image3'
                }, {
                    type: 'picture',
                    icon: 'image2',
                    name: 'Image4'
                }, {
                    type: 'picture',
                    icon: 'image2',
                    name: 'Image5'
                }, {
                    type: 'picture',
                    icon: 'file4',
                    name: 'File 1'
                }, {
                    type: 'picture',
                    icon: 'file4',
                    name: 'File 2'
                }];
        
                $scope.settings = {
                    theme: $scope.theme,     // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,       // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,     // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                    enhance: true,           // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-enhance
                    actions: [{              // More info about actions: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-actions
                        icon: 'link',
                        action: function (event, inst) {
                            notify('Linked');
                        }
                    }, {
                        icon: 'star3',
                        action: function (event, inst) {
                            notify('Starred');
                        }
                    }, {
                        icon: 'remove',
                        undo: true,          // More info about undo: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!methods-undo
                        action: function (event, inst) {
                            inst.remove(event.target);
                            return false;
                        }
                    }, {
                        icon: 'download',
                        action: function (event, inst) {
                            notify('Downloaded');
                        }
                    }, ],
                    itemGroups: {            // More info about itemGroups: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-itemGroups
                        folder: {
                            actions: [{              // More info about actions: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-actions
                                icon: 'link',
                                action: function (event, inst) {
                                    notify('Linked');
                                }
                            }, {
                                icon: 'star3',
                                action: function (event, inst) {
                                    notify('Starred');
                                }
                            }, {
                                icon: 'download',
                                action: function (event, inst) {
                                    notify('Downloaded');
                                }
                            }, ]
                        },
                        music: {
                            actions: [{              // More info about actions: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-actions
                                icon: 'link',
                                action: function (event, inst) {
                                    notify('Linked');
                                }
                            }, {
                                icon: 'star3',
                                action: function (event, inst) {
                                    notify('Starred');
                                }
                            }, {
                                icon: 'download',
                                action: function (event, inst) {
                                    notify('Downloaded');
                                }
                            }, {
                                icon: 'play',
                                action: function (event, inst) {
                                    notify('Playing...');
                                }
                            }, {
                                icon: 'remove',
                                undo: true,          // More info about undo: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!methods-undo
                                action: function (event, inst) {
                                    inst.remove(event.target);
                                    return false;
                                }
                            }]
                        },
                        movie: {
                            actions: [{              // More info about actions: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-actions
                                icon: 'link',
                                action: function (event, inst) {
                                    notify('Linked');
                                }
                            }, {
                                icon: 'star3',
                                action: function (event, inst) {
                                    notify('Starred');
                                }
                            }, {
                                icon: 'download',
                                action: function (event, inst) {
                                    notify('Downloaded');
                                }
                            }, {
                                icon: 'play',
                                action: function (event, inst) {
                                    notify('Playing...');
                                }
                            }, {
                                icon: 'remove',
                                undo: true,          // More info about undo: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!methods-undo
                                action: function (event, inst) {
                                    inst.remove(event.target);
                                    return false;
                                }
                            }]
                        },
                        picture: {
                            actions: [{              // More info about actions: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!opt-actions
                                icon: 'link',
                                action: function (event, inst) {
                                    notify('Linked');
                                }
                            }, {
                                icon: 'star3',
                                action: function (event, inst) {
                                    notify('Starred');
                                }
                            }, {
                                icon: 'download',
                                action: function (event, inst) {
                                    notify('Downloaded');
                                }
                            }, {
                                icon: 'print',
                                action: function (event, inst) {
                                    notify('Printing...');
                                }
                            }, {
                                icon: 'remove',
                                undo: true,          // More info about undo: https://docs.mobiscroll.com/3-0-0_beta4/angular/listview#!methods-undo
                                action: function (event, inst) {
                                    inst.remove(event.target);
                                    return false;
                                }
                            }]
                        }
                    }
                };
        
                var notification = document.createElement('div'),
                    notificationTimer;
        
                notification.innerHTML = '<div class="demo-notification"><div class="demo-notification-i"></div></div>';
                notification = notification.firstChild;
                document.body.appendChild(notification);
        
                function notify(text) {
        
                    clearTimeout(notificationTimer);

                    notification.style.display = 'block';
                    notification.firstChild.innerHTML = text;
        
                    if (notification.classList.contains('demo-notification-v')) {
                        notification.classList.remove('demo-notification-v');
                        notificationTimer = setTimeout(function () {
                            notification.classList.add('demo-notification-v');
                        }, 200);
                    } else {
                        notification.classList.add('demo-notification-v');
                    }
        
                    notificationTimer = setTimeout(function () {
                        notification.classList.remove('demo-notification-v');
                        notificationTimer = setTimeout(function () {
                            notification.style.display = 'none';
                        }, 200);
                    }, 2000);
                }
        
            }]);

        // Custom Icons demo script
        angular
            .module('ratingIcons', ['mobiscroll-rating'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/rating#!opt-mode
                    label: 'Rating',      // More info about label: https://docs.mobiscroll.com/3-0-0_beta4/angular/rating#!opt-label
                    icon: {               // More info about icon: https://docs.mobiscroll.com/3-0-0_beta4/angular/rating#!opt-icon
                        filled: 'heart'
                    }
                };
        
            }]);

        // Decimal demo script
        angular
            .module('numberDecimal', ['mobiscroll-number'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/number#!opt-mode
                    maxWidth: 100         // More info about maxWidth: https://docs.mobiscroll.com/3-0-0_beta4/angular/number#!opt-maxWidth
                };
        
            }]);

        //  Decimal demo script
        angular
            .module('numpadDecimal', ['mobiscroll-numpad'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                    min: 1,
                    scale: 2,
                    preset: 'decimal'     // More info about preset: https://docs.mobiscroll.com/3-0-0_beta4/angular/numpad#!opt-preset
                };
        
            }]);

        // Currency demo script
        angular
            .module('numpadCurrency', ['mobiscroll-form', 'mobiscroll-numpad'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode
                };
        
                $scope.numpadSettings = {
                    preset: 'decimal',    // More info about preset: https://docs.mobiscroll.com/3-0-0_beta4/angular/numpad#!opt-preset
                    min: 5,
                    max: 500,
                    prefix: '$',
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode
                };
        
                $scope.price = 25;
        
            }]);

        // Time demo script
        angular
            .module('numpadTime', ['mobiscroll-numpad'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                    preset: 'time',       // More info about preset: https://docs.mobiscroll.com/3-0-0_beta4/angular/numpad#!opt-preset
                    timeFormat: 'HH:ii A'
                };
        
            }]);

        // Masked Entry - PIN demo script
        angular
            .module('numpadPin', ['mobiscroll-numpad'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,                // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                    template: 'dddd',                   // More info about template: https://docs.mobiscroll.com/3-0-0_beta4/angular/numpad#!opt-template
                    allowLeadingZero: true,             // More info about allowLeadingZero: https://docs.mobiscroll.com/3-0-0_beta4/angular/numpad#!opt-allowLeadingZero
                    placeholder: '-',                   // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta4/angular/numpad#!opt-placeholder
                    mask: '*',                          // More info about mask: https://docs.mobiscroll.com/3-0-0_beta4/angular/numpad#!opt-mask
                    validate: function (event, inst) {  // More info about validate: https://docs.mobiscroll.com/3-0-0_beta4/angular/numpad#!event-validate
                        return {
                            invalid: event.values.length != 4
                        };
                    }
                };
        
            }]);

        // Setting min and max values demo script
        angular
            .module('datetimeMinmax', ['mobiscroll-datetime'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,         // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,           // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,         // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,               // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/datetime#!opt-mode
                    min: new Date(2014, 8, 15),  // More info about min: https://docs.mobiscroll.com/3-0-0_beta4/angular/datetime#!opt-min
                    max: new Date(2024, 8, 14)   // More info about max: https://docs.mobiscroll.com/3-0-0_beta4/angular/datetime#!opt-max
                };
        
            }]);

        // Tab menu demo script
        angular
            .module('menustripTabs', ['mobiscroll-menustrip'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,                 // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                   // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                 // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                    type: 'tabs',                        // More info about type: https://docs.mobiscroll.com/3-0-0_beta4/angular/menustrip#!opt-type
                    onItemTap: function (event, inst) {  // More info about onItemTap: https://docs.mobiscroll.com/3-0-0_beta4/angular/menustrip#!event-onItemTap
                        document.querySelector('.md-tabs-sel').classList.remove('md-tabs-sel');
                        document.querySelector('.' + event.target.getAttribute('data-tab')).classList.add('md-tabs-sel');
                    }
                };
        
                mobiscroll.listview('.md-apps-ul', {
                    theme: $scope.theme,                 // Specify theme like: theme: 'ios' or omit setting to use default
                    
                    swipe: false
                });
        
            }]);

        // Icon and Text demo script
        angular
            .module('imageIcons', ['mobiscroll-image'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.data = [{
                    val: 'Share',
                    icon: 'share',
                    p: 'Share'
                }, {
                    val: 'Bookmark',
                    icon: 'star',
                    p: 'Bookmark'
                }, {
                    val: 'Flag',
                    icon: 'flag',
                    p: 'Flag'
                }, {
                    val: 'Tag',
                    icon: 'tag',
                    p: 'Tag'
                }, {
                    val: 'Download',
                    icon: 'download',
                    p: 'Download'
                }, {
                    val: 'Delete',
                    icon: 'remove',
                    p: 'Delete'
                }];
        
                $scope.settings = {
                    theme: $scope.theme,               // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                 // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,               // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                     // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-mode
                    placeholder: 'Please Select ...',  // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-placeholder
                    showLabel: false,                  // More info about showLabel: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-showLabel
                    enhance: true                      // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta4/angular/image#!opt-enhance
                };
        
            }]);

        // Step demo script
        angular
            .module('numberStep', ['mobiscroll-number'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/number#!opt-mode
                    layout: 'fixed',      // More info about layout: https://docs.mobiscroll.com/3-0-0_beta4/angular/number#!opt-layout
                    step: 5               // More info about step: https://docs.mobiscroll.com/3-0-0_beta4/angular/number#!opt-step
                };
        
            }]);

        // Dialog demo script
        angular
            .module('widgetDialog', ['mobiscroll-widget'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,                    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                      // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                    // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                    anchor: '#widgetDialog-show',           // More info about anchor: https://docs.mobiscroll.com/3-0-0_beta4/angular/widget#!opt-anchor
                    buttons: [{                             // More info about buttons: https://docs.mobiscroll.com/3-0-0_beta4/angular/widget#!opt-buttons
                        text: 'Great',
                        handler: 'set'
                    }, {
                        text: 'I’ve been better',
                        handler: 'cancel'
                    }],
                    onBeforeShow: function (event, inst) {  // More info about onBeforeShow: https://docs.mobiscroll.com/3-0-0_beta4/angular/widget#!event-onBeforeShow
                        var s = inst.settings;
        
                        if (s.theme == 'wp' || s.baseTheme == 'wp') {
                            s.buttons[0].icon = 'checkmark';
                            s.buttons[1].icon = 'close';
                        }
                    }
                };
        
            }]);

        // Alert message demo script
        angular
            .module('widgetMessage', ['mobiscroll-widget'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,                    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                      // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                    // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                    anchor: '#widgetMessage-show',          // More info about anchor: https://docs.mobiscroll.com/3-0-0_beta4/angular/widget#!opt-anchor
                    buttons: [{                             // More info about buttons: https://docs.mobiscroll.com/3-0-0_beta4/angular/widget#!opt-buttons
                        text: 'Agree',
                        handler: 'set'
                    }, {
                        text: 'Disagree',
                        handler: 'cancel'
                    }],
                    onBeforeShow: function (event, inst) {  // More info about onBeforeShow: https://docs.mobiscroll.com/3-0-0_beta4/angular/widget#!event-onBeforeShow
                        var s = inst.settings;
        
                        if (s.theme == 'wp' || s.baseTheme == 'wp') {
                            s.buttons[0].icon = 'checkmark';
                            s.buttons[1].icon = 'close';
                        }
                    }
                };
        
            }]);

        // Custom Units demo script
        angular
            .module('scrollerCustomunits', ['mobiscroll-scroller'])
            .controller('demoController', ['$scope', function ($scope) {
        
                var units = ['oz', 'g', 'serving'],
                    prevUnit = 'oz',
                    wheel = [
                        [{
                            circular: false,            // More info about circular: https://docs.mobiscroll.com/3-0-0_beta4/angular/scroller#!opt-circular
                            data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
                        }, {
                            circular: false,            // More info about circular: https://docs.mobiscroll.com/3-0-0_beta4/angular/scroller#!opt-circular
                            data: ['-', '1/4', '1/2', '3/4']
                        }, {
                            circular: false,            // More info about circular: https://docs.mobiscroll.com/3-0-0_beta4/angular/scroller#!opt-circular
                            data: units
                        }]
                    ];
        
                $scope.settings = {
                    theme: $scope.theme,                // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                      // More info about mode: https://docs.mobiscroll.com/3-0-0_beta4/angular/scroller#!opt-mode
                    wheels: wheel,                      // More info about wheels: https://docs.mobiscroll.com/3-0-0_beta4/angular/scroller#!opt-wheels
                    validate: function (event, inst) {  // More info about validate: https://docs.mobiscroll.com/3-0-0_beta4/angular/scroller#!event-validate
                        var i,
                            mult = 1,
                            index = event.index,
                            currUnit = event.values[2],
                            disabled = [];
        
                        if (currUnit == 'g' && (prevUnit == 'oz' || prevUnit == 'serving')) {
                            mult = 28;
                        } else if ((currUnit != 'oz' || currUnit != 'serving') && prevUnit == 'g') {
                            mult = 1 / 28;
                        }
        
                        if (currUnit != 'serving') {
                            disabled.push('1/4', '1/2', '3/4');
                        }
        
                        if (index == 2 && currUnit != prevUnit) {
                            for (i = 0; i < wheel[0][0].data.length; ++i) {
                                wheel[0][0].data[i] = Math.round(wheel[0][0].data[i] * mult);
                            }
        
                            inst.settings.wheels = wheel;
                            inst._tempWheelArray[0] = inst._tempWheelArray[0] * mult;
                            inst.changeWheel({
                                0: wheel[0][0]
                            });
        
                            prevUnit = currUnit;
                        }
        
                        return {
                            disabled: [                 // More info about disabled: https://docs.mobiscroll.com/3-0-0_beta4/angular/scroller#!opt-disabled
                                [], disabled, []
                            ]
                        }
                    },
                    parseValue: function (val) {
                        var hasUnit;
                        console.log(val);
                        if (val) {
                            val = val.toString().split(' ');
                            hasUnit = units.indexOf(val[1]) !== -1;
                            return [val[0], (hasUnit ? '' : val[1].replace('-', '')), (hasUnit ? val[1] : val[2])];
                        }
        
                        return [0, '-', 'oz'];
                    },
                    formatValue: function (data) {
                        return (data[2] == 'serving' && data[0] == 0 && data[1] ? '' : data[0]) + (data[1] ? ' ' + data[1].replace('-', '') : '') + ' ' + data[2];
                    }
                };
        
            }]);

        // Text Fields demo script
        angular
            .module('formsTextfields', ['mobiscroll-form'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme  // Specify theme like: theme: 'ios' or omit setting to use default
                };
        
            }]);

        // Select demo script
        angular
            .module('formsSelect', ['mobiscroll-form'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
                };
        
            }]);

        // Checkbox demo script
        angular
            .module('formsCheckbox', ['mobiscroll-form'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
                };
        
            }]);

        // Switch demo script
        angular
            .module('formsSwitch', ['mobiscroll-form'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
                };
        
            }]);

        // Radio buttons demo script
        angular
            .module('formsRadiobtn', ['mobiscroll-form'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
                };
        
            }]);

        // Buttons demo script
        angular
            .module('formsButtons', ['mobiscroll-form'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
                };
        
            }]);

        // Typography demo script
        angular
            .module('formsTypography', ['mobiscroll-form'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
                };
        
            }]);

        // Slider demo script
        angular
            .module('formsSlider', ['mobiscroll-form'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
                };
        
            }]);

        // Stepper demo script
        angular
            .module('formsStepper', ['mobiscroll-form', 'mobiscroll-numpad'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
                };
        
                $scope.numpadSettings = {
                    preset: 'decimal',
                    min: 5,
                    max: 120,
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
                };
        
                $scope.allowOwerweight = false;
                $scope.consumption = 30;
        
            }]);

        // Progress demo script
        angular
            .module('formsProgress', ['mobiscroll-form', 'mobiscroll-progress'])
            .controller('demoController', ['$scope', '$interval', '$timeout', function ($scope, $interval, $timeout) {
                var interval, uploadInterval;
                uploadList = ['1MB', '5MB', '10MB', '50MB'],
                    labelList = ['Cart', 'Signup', 'Checkout', 'Success'];
        
                $scope.settings = {
                    theme: $scope.theme,           // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,             // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode,
                    onInit: function (ev, inst) {  // More info about onInit: https://docs.mobiscroll.com/3-0-0_beta4/angular/forms#!event-onInit
                        var i,
                            uploadLabels = document.querySelectorAll('.md-upload .mbsc-progress-step-label'),
                            checkoutLabels = document.querySelectorAll('.md-demo .mbsc-progress-step-label');
        
                        for (i = 0; i < uploadLabels.length; ++i) {
                            uploadLabels[i].innerHTML = uploadList[i];
                        }
        
                        for (i = 0; i < checkoutLabels.length; ++i) {
                            checkoutLabels[i].innerHTML = labelList[i];
                        }
        
                    }
                };
        
                $scope.downloadVal = 0;
                $scope.processVal = 0;
                $scope.uploadVal = 0;
                $scope.checkoutVal = 0;
        
                $scope.startDownload = function () {
                    $scope.downloadVal = 0;
        
                    $interval.cancel(interval);
        
                    interval = $interval(function () {
                        if ($scope.downloadVal == 100) {
                            $interval.cancel(interval);
                        }
                        $scope.downloadVal += 5;
                    }, 500);
                };
        
                $scope.startDownload()
        
                $scope.updateProgress = function () {
                    if ($scope.processVal == 100) {
                        $scope.processVal = 0;
                    } else {
                        $scope.processVal += 25;
                    }
                };
        
                $scope.startUpload = function () {
                    $scope.uploadVal = 0;
        
                    $interval.cancel(uploadInterval);
        
                    uploadInterval = $interval(function () {
                        if ($scope.uploadVal >= 100) {
                            $interval.cancel(uploadInterval);
                        }
                        $scope.uploadVal += 17;
                    }, 1000);
                };
        
                $scope.startUpload();
        
                $scope.updateCheckout = function () {
                    if ($scope.checkoutVal >= 100) {
                        $scope.checkoutVal = 0;
                    } else {
                        $scope.checkoutVal += 33.34;
                    }
                };
        
            }]);

        // Segmented demo script
        angular
            .module('formsSegmented', ['mobiscroll-form'])
            .controller('demoController', ['$scope', function ($scope) {
        
                $scope.settings = {
                    theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
                };
                $scope.range = 'year';
                $scope.week = {
                    mo: true,
                    th: true
                };
                $scope.app = 'featured';
                $scope.setting = 'c';
                $scope.org = 'ind';
        
            }]);

    </script>
</head>

<body>
    <!-- ------------------------------------------------------------------ -->
    <!-- Demo configurator markup START, ignore this in your implementation -->
    <div class="header">
        <h1>Mobiscroll</h1>
    </div>
    <div id="main" class="demo-main" ng-controller="mainController">
        <div>
            <label for="theme">Theme</label>
            <select ng-model="theme" name="theme" id="theme" class="settings">
                <option value="">Default / Auto</option>
                <option value="mobiscroll">Mobiscroll</option>
                <option value="android-holo">Android Holo</option>
                <option value="wp">Windows Phone</option>
                <option value="ios">iOS</option>
                <option value="bootstrap">Bootstrap</option>
                <option value="android-holo-light">Android Holo Light</option>
                <option value="wp-light">Windows Phone Light</option>
                <option value="mobiscroll-dark">Mobiscroll Dark</option>
                <option value="material">Material</option>
                <option value="material-dark">Material Dark</option>
            </select>
        </div>
        <div ng-hide="noDisplay() === true">
            <label for="display">Display</label>
            <select ng-model="display" name="display" id="display" class="settings">
                <option value="">Default</option>
                <option ng-show="noDisplay() !== 'partial'" value="center">Center</option>
                <option value="inline">Inline</option>
                <option ng-show="noDisplay() !== 'partial'" value="bubble">Bubble</option>
                <option value="top">Top</option>
                <option value="bottom">Bottom</option>
            </select>
        </div>
        <div>
            <label for="language">Language</label>
            <select ng-model="language" name="language" id="language" class="settings">
                <option value="">English</option>
                <option value="hu">Magyar</option>
                <option value="de">Deutsch</option>
                <option value="es">Español</option>
                <option value="fr">Français</option>
                <option value="it">Italiano</option>
                <option value="no">Norsk</option>
                <option value="pt-BR">Pt. Brasileiro</option>
                <option value="zh">Chinese</option>
                <option value="nl">Nederlands</option>
                <option value="tr">Türkçe</option>
                <option value="ja">Japanese</option>
                <option value="pt-PT">Português Europeu</option>
                <option value="sv">Svenska</option>
                <option value="en-UK">English (UK)</option>
                <option value="cs">Čeština</option>
                <option value="sk">Slovenčina</option>
                <option value="ro">Română</option>
                <option value="pl">Polski</option>
                <option value="ru-UA">Русский (UA)</option>
                <option value="fa">فارسی</option>
                <option value="ru">Русский</option>
                <option value="lt">Lietuvių</option>
                <option value="ca">Català</option>
                <option value="da">Dansk</option>
                <option value="he">עברית</option>
            </select>
        </div>
        <div>
            <label for="demo">Demo</label>
            <select ng-model="demo" name="demo" id="demo" class="settings">
                <option value="">Please select a demo</option>
                <optgroup label="Datetime">
                    <option value="datetimeDate" selected>Basic usage date</option>
                    <option value="datetimeInvalid" >Datetime with invalids</option>
                    <option value="datetimeTime" >Basic usage time</option>
                    <option value="datetimeMinmax" >Setting min and max values</option>
                </optgroup>
                <optgroup label="Select">
                    <option value="selectBasic" >Basic usage</option>
                    <option value="selectGroupselect" >Group options</option>
                    <option value="selectMultiple" >Multiple select</option>
                </optgroup>
                <optgroup label="Rating">
                    <option value="ratingStars" >Basic usage</option>
                    <option value="ratingGrades" >Grades</option>
                    <option value="ratingIcons" >Custom Icons</option>
                </optgroup>
                <optgroup label="Measurement">
                    <option value="measurementDistance" >Distance</option>
                    <option value="measurementSpeed" >Speed</option>
                    <option value="measurementTemperature" >Temperature</option>
                    <option value="measurementMass" >Mass</option>
                    <option value="measurementForce" >Force</option>
                </optgroup>
                <optgroup label="List">
                    <option value="listTreelist" >Basic usage</option>
                    <option value="listUnordered" >Unordered list</option>
                </optgroup>
                <optgroup label="Image">
                    <option value="imageText" >Image and Text</option>
                    <option value="imageBasic" >Image Only</option>
                    <option value="imageIcons" >Icon and Text</option>
                </optgroup>
                <optgroup label="Calendar">
                    <option value="calendarTime" >With time scroller</option>
                    <option value="calendarBasic" >Basic usage</option>
                    <option value="calendarMultiday" >Multi day select</option>
                </optgroup>
                <optgroup label="Timespan">
                    <option value="timespanBasic" >Basic usage</option>
                    <option value="timespanDhm" >Day/Hour/Minute span</option>
                </optgroup>
                <optgroup label="Timer">
                    <option value="timerCountdown" >Countdown</option>
                </optgroup>
                <optgroup label="Color">
                    <option value="colorHx" >Basic usage</option>
                </optgroup>
                <optgroup label="Range">
                    <option value="rangeBasic" >Basic usage</option>
                    <option value="rangeTime" >Time range</option>
                    <option value="rangeTwoinputs" >Two inputs</option>
                </optgroup>
                <optgroup label="Eventcalendar">
                    <option value="eventcalendarEvent" >Events</option>
                </optgroup>
                <optgroup label="Listview">
                    <option value="listviewUpdate" >Create, remove, update</option>
                    <option value="listviewSorthandle" >Sort handle</option>
                    <option value="listviewActionmenu" >Action menu</option>
                </optgroup>
                <optgroup label="Number">
                    <option value="numberDecimal" >Decimal</option>
                    <option value="numberStep" >Step</option>
                </optgroup>
                <optgroup label="Numpad">
                    <option value="numpadDecimal" > Decimal</option>
                    <option value="numpadCurrency" >Currency</option>
                    <option value="numpadTime" >Time</option>
                    <option value="numpadPin" >Masked Entry - PIN</option>
                </optgroup>
                <optgroup label="Menustrip">
                    <option value="menustripTabs" >Tab menu</option>
                </optgroup>
                <optgroup label="Widget">
                    <option value="widgetDialog" >Dialog</option>
                    <option value="widgetMessage" >Alert message</option>
                </optgroup>
                <optgroup label="Scroller">
                    <option value="scrollerCustomunits" >Custom Units</option>
                </optgroup>
                <optgroup label="Forms">
                    <option value="formsTextfields" >Text Fields</option>
                    <option value="formsSelect" >Select</option>
                    <option value="formsCheckbox" >Checkbox</option>
                    <option value="formsSwitch" >Switch</option>
                    <option value="formsRadiobtn" >Radio buttons</option>
                    <option value="formsButtons" >Buttons</option>
                    <option value="formsTypography" >Typography</option>
                    <option value="formsSlider" >Slider</option>
                    <option value="formsStepper" >Stepper</option>
                    <option value="formsProgress" >Progress</option>
                    <option value="formsSegmented" >Segmented</option>
                </optgroup>
            </select>
        </div>
    </div>
    <!-- Demo configurator markup END -->
    <!-- ------------------------------------------------------------------ -->

        <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage date START -->
    <div id="demo_cont_datetimeDate" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mydate" mobiscroll-date="settings" mobiscroll-instance="demo" placeholder="Please Select..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
        
    </div>
    <!-- Basic usage date END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Datetime with invalids START -->
    <div id="demo_cont_datetimeInvalid" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mydatetime" mobiscroll-datetime="settings" mobiscroll-instance="demo" placeholder="Please Select..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
        
    </div>
    <!-- Datetime with invalids END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage time START -->
    <div id="demo_cont_datetimeTime" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mytime" mobiscroll-time="settings" mobiscroll-instance="demo" placeholder="Please Select..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
        
    </div>
    <!-- Basic usage time END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div id="demo_cont_selectBasic" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <select ng-model="myselect" mobiscroll-select="settings" mobiscroll-instance="demo">
            <option value="1">Atlanta</option>
            <option value="2">Berlin</option>
            <option value="3">Boston</option>
            <option value="4">Chicago</option>
            <option value="5">London</option>
            <option value="6">Los Angeles</option>
            <option value="7">New York</option>
            <option value="8">Paris</option>
            <option value="9">San Francisco</option>
        </select>

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
        
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Group options START -->
    <div id="demo_cont_selectGroupselect" class="ng-hide demo-wrapper"  ng-controller="demoController">
    
        <select ng-model="myselect" mobiscroll-select="settings" mobiscroll-instance="demo">
            <optgroup label="USA">
                <option value="1">Atlanta</option>
                <option value="2">Boston</option>
                <option value="3">Chicago</option>
                <option value="4">Los Angeles</option>
                <option value="5">New York</option>
                <option value="6">San Francisco</option>
            </optgroup>
            <optgroup label="UK">
                <option value="7">Bath</option>
                <option value="8">Bristol</option>
                <option value="9">Cambridge</option>
                <option value="10">London</option>
                <option value="11">Leeds</option>
                <option value="12">Manchester</option>
                <option value="13">Newcastle</option>
                <option value="14">Oxford</option>
            </optgroup>
            <optgroup label="China">
                <option value="15">Beijing</option>
                <option value="16">Chongqing</option>
                <option value="17">Shanghai</option>
                <option value="18">Shenzhen</option>
                <option value="19">Tianjin</option>
            </optgroup>
        </select>

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Group options END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div id="demo_cont_ratingStars" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <div class="md-stars">
            <ul class="md-products">
                <li ng-repeat="item in data">
                    <div class="md-product" mobiscroll-rating="settings" ng-model="item.rating">
                        <img ng-src="images/{{item.imgsrc}}" />
                        <h3>{{item.name}}</h3>
                        <p>{{item.name}} </p>
                        <span class="md-rate">
                            <span class="md-rating">{{item.rating}} of 5</span>
                        </span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Grades START -->
    <div id="demo_cont_ratingGrades" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myrating" mobiscroll-rating="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Grades END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Distance START -->
    <div id="demo_cont_measurementDistance" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mydistance" mobiscroll-distance="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Distance END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Speed START -->
    <div id="demo_cont_measurementSpeed" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myspeed" mobiscroll-speed="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Speed END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Temperature START -->
    <div id="demo_cont_measurementTemperature" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mytemperature" mobiscroll-temperature="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Temperature END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Mass START -->
    <div id="demo_cont_measurementMass" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mymass" mobiscroll-mass="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Mass END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Force START -->
    <div id="demo_cont_measurementForce" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myforce" mobiscroll-force="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Force END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div id="demo_cont_listTreelist" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <ul ng-model="mylist" mobiscroll-list="settings" mobiscroll-instance="demo" style="display:none">
            <li data-val="Eastern Division">East
                <ul>
                    <li data-val="Marketing">Marketing
                        <ul>
                            <li data-val="Eden E">Eden E</li>
                            <li data-val="Milda J">Milda J</li>
                            <li data-val="Porfirio R">Porfirio R</li>
                        </ul>
                    </li>
                    <li data-val="Research & Development">R&D
                        <ul>
                            <li data-val="Frances P">Frances P</li>
                            <li data-val="Frank D">Frank D</li>
                            <li data-val="Gianny P">Gianny P</li>
                            <li data-val="Ivan F">Ivan F</li>
                            <li data-val="John M">John M</li>
                            <li data-val="Mildred S">Mildred S</li>
                            <li data-val="Sam P">Sam P</li>
                        </ul>
                    </li>
                    <li data-val="Sales">Sales
                        <ul>
                            <li data-val="Edelmira R">Edelmira R</li>
                            <li data-val="Francie S">Francie S</li>
                            <li data-val="Lean F">Lean F</li>
                            <li data-val="Kirby C">Kirby C</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li data-val="Western Division">West
                <ul>
                    <li data-val="Marketing">Marketing
                        <ul>
                            <li data-val="Cliff B">Cliff B</li>
                            <li data-val="Helen D">Helen D</li>
                            <li data-val="Stephan V">Stephan V</li>
                        </ul>
                    </li>
                    <li data-val="Research & Development">R&D
                        <ul>
                            <li data-val="Andy G">Andy G</li>
                            <li data-val="Danny A">Danny A</li>
                            <li data-val="Ennio M">Ennio M</li>
                            <li data-val="Emil E">Emil E</li>
                            <li data-val="Frank S">Frank S</li>
                            <li data-val="Gonzo G">Gonzo G</li>
                            <li data-val="Hal A">Hal A</li>
                            <li data-val="Jack G">Jack G</li>
                            <li data-val="John A">John A</li>
                            <li data-val="Simon D">Simon D</li>
                            <li data-val="Victor S">Victor S</li>
                        </ul>
                    </li>
                    <li data-val="Sales">Sales
                        <ul>
                            <li data-val="Dana A">Dana A</li>
                            <li data-val="Frank D">Frank D</li>
                            <li data-val="Leanna S">Leanna S</li>
                            <li data-val="Michael D">Michael D</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Image and Text START -->
    <div id="demo_cont_imageText" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <ul mobiscroll-image="settings" mobiscroll-instance="demo" ng-model="selected" style="display:none">
            <li ng-repeat="item in data" data-val="{{item.name}}">
                <img ng-src="images/{{item.imgsrc}}" />
                <p>{{item.p}}</p>
            </li>
        </ul>

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Image and Text END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Image Only START -->
    <div id="demo_cont_imageBasic" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <ul mobiscroll-image="settings" mobiscroll-instance="demo" ng-model="selected" style="display:none">
            <li ng-repeat="item in data" data-val="{{item.name}}">
                <img ng-src="images/{{item.imgsrc}}" />
            </li>
        </ul>

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Image Only END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Unordered list START -->
    <div id="demo_cont_listUnordered" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <ul ng-model="mylist" mobiscroll-list="settings" mobiscroll-instance="demo" style="display:none">
            <li>Sugar</li>
            <li>Salt</li>
            <li>Butter</li>
            <li>Flour</li>
            <li>Chocolate</li>
        </ul>

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Unordered list END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- With time scroller START -->
    
    <div id="demo_cont_calendarTime" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mycalendar" mobiscroll-calendar="settings" mobiscroll-instance="demo" placeholder="Please Select..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
        
    </div>
    <!-- With time scroller END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    
    <div id="demo_cont_calendarBasic" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mycalendar" mobiscroll-calendar="settings" mobiscroll-instance="demo" placeholder="Please Select..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
        
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Multi day select START -->
    
    <div id="demo_cont_calendarMultiday" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mycalendar" mobiscroll-calendar="settings" mobiscroll-instance="demo" placeholder="Please Select..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
        
    </div>
    <!-- Multi day select END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Multiple select START -->
    <div id="demo_cont_selectMultiple" class="ng-hide demo-wrapper"  ng-controller="demoController">
    
        <select ng-model="myselect" mobiscroll-select="settings" mobiscroll-instance="demo" multiple>
            <option value="1">Books</option>
            <option value="2">Movies, Music & Games</option>
            <option value="3" selected>Electronics & Computers</option>
            <option value="4" selected>Home, Garden & Tools</option>
            <option value="5">Health & Beauty</option>
            <option value="6">Toys, Kids & Baby</option>
            <option value="7">Clothing & Jewelry</option>
            <option value="8">Sports & Outdoors</option>
            <option value="9">Automotive & Industrial</option>
        </select>

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Multiple select END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div id="demo_cont_timespanBasic" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mytimespan" mobiscroll-timespan="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Day/Hour/Minute span START -->
    <div id="demo_cont_timespanDhm" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mytimespan" mobiscroll-timespan="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Day/Hour/Minute span END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Countdown START -->
    <div id="demo_cont_timerCountdown" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mytimer" mobiscroll-timer="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    </div>
    <!-- Countdown END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div id="demo_cont_colorHx" class="ng-hide demo-wrapper"  ng-controller="demoController"><b>Please choose color</b><br/>
        <div ng-model="mycolor" mobiscroll-color="settings" mobiscroll-instance="demo" class="md-color">#ff0000</div>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    
    <div id="demo_cont_rangeBasic" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myrange" mobiscroll-range="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Time range START -->
    <div id="demo_cont_rangeTime" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myrange" mobiscroll-range="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Time range END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Two inputs START -->
    <div id="demo_cont_rangeTwoinputs" class="ng-hide demo-wrapper"  ng-controller="demoController">
        
        <label for="rangeTwoinputs-startDate">Start</label><br/>
        <input id="rangeTwoinputs-startDate" placeholder="Please Select ..." readonly/>
    
        <label for="rangeTwoinputs-endDate">End</label><br/>
        <input id="rangeTwoinputs-endDate" placeholder="Please Select ..." readonly/>
        <div ng-model="myrange" mobiscroll-range="settings" mobiscroll-instance="demo"> </div>
    </div>
    <!-- Two inputs END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Events START -->
    
    <div id="demo_cont_eventcalendarEvent" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <div mobiscroll-data="events" mobiscroll-eventcalendar="settings" mobiscroll-instance="demo"></div>
        
        <button ng-click="demo.show()">Show calendar</button>
        
    </div>
    <!-- Events END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Create, remove, update START -->
    <div id="demo_cont_listviewUpdate" class="ng-hide demo-wrapper"  ng-controller="demoController">

        <div class="md-demo-note demo-note" ng-show="!data.length" ng-click="reload()">
            Whooa, list is empty. Tap here to refresh! &nbsp;
            <span class="mbsc-ic mbsc-ic-loop2"></span>
        </div>
    
        <ul mobiscroll-listview="settings" mobiscroll-data="data" style="display:none">
            <li data-id="{{item.id}}">{{item.title}}
                <div class="md-wo-status">{{item.status}}</div>
            </li>
        </ul>
    
    </div>
    <!-- Create, remove, update END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Sort handle START -->
    <div id="demo_cont_listviewSorthandle" class="ng-hide demo-wrapper"  ng-controller="demoController">

        <ul mobiscroll-listview="settings" mobiscroll-data="data" style="display:none">
            <li><img ng-src="images/{{item.imgsrc}}" />
                <h3>{{item.h3}}</h3>
                <p>{{item.p}}</p>
            </li>
        </ul>
    
    </div>
    <!-- Sort handle END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Action menu START -->
    <div id="demo_cont_listviewActionmenu" class="ng-hide demo-wrapper"  ng-controller="demoController">
    
        <ul mobiscroll-listview="settings" mobiscroll-data="data" style="display:none">
            <li data-type="{{item.type}}" data-icon="{{item.icon}}">{{item.name}}</li>
        </ul>
    
    </div>
    <!-- Action menu END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Custom Icons START -->
    <div id="demo_cont_ratingIcons" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myrating" mobiscroll-rating="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Custom Icons END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Decimal START -->
    <div id="demo_cont_numberDecimal" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mynumber" mobiscroll-number="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Decimal END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!--  Decimal START -->
    <div id="demo_cont_numpadDecimal" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mynumpad" mobiscroll-numpad="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!--  Decimal END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Currency START -->
    <div id="demo_cont_numpadCurrency" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <div mobiscroll-form="settings" class="md-stepper-np" style="display:none">
            <div class="mbsc-padding md-demo">
                <h4 class="md-title">Automatically top up account</h4>
                <div class="mbsc-desc ">Top up from credit card if account falls bellow $10</div>
                <div>
                    <input type="number" data-role="stepper" ng-model="price" min="10" max="120" step="10" ng-click="numpadInst.show()" readonly />
                    <div class="md-numpad" mobiscroll-numpad="numpadSettings" ng-model="price" mobiscroll-instance="numpadInst"></div>
                </div>
                <button class="mbsc-btn-block">Save Settings</button>
            </div>
        </div>
    </div>
    <!-- Currency END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Time START -->
    <div id="demo_cont_numpadTime" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mynumpad" mobiscroll-numpad="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Time END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Masked Entry - PIN START -->
    <div id="demo_cont_numpadPin" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mynumpad" mobiscroll-numpad="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Masked Entry - PIN END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Setting min and max values START -->
    <div id="demo_cont_datetimeMinmax" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mydate" mobiscroll-date="settings" mobiscroll-instance="demo" placeholder="Please Select..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
        
    </div>
    <!-- Setting min and max values END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Tab menu START -->
    <div id="demo_cont_menustripTabs" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <ul mobiscroll-menustrip="settings" mobiscroll-instance="demo" style="display:none">
            <li data-tab="tab-downloaded" data-selected="true">Downloaded</li>
            <li data-tab="tab-all">All</li>
            <li data-tab="tab-external">External storage</li>
            <li data-tab="tab-running">Running</li>
            <li data-tab="tab-disabled">Disabled</li>
        </ul>
        <div id="menustripTabs-tab-downloaded" class="md-tab-h md-tabs-sel tab-downloaded">
            <ul class="md-apps-ul" style="display:none;">
                <li><span class="md-app-ic mbsc-ic mbsc-ic-calendar"></span>Calendar<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">19/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-camera"></span>Camera<span class="md-app-detail"><span class="md-app-size">43.11MB</span><span class="md-app-date">10/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-folder"></span>File Manager<span class="md-app-detail"><span class="md-app-size">12.66MB</span><span class="md-app-date">9/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-earth"></span>Maps<span class="md-app-detail"><span class="md-app-size">46.21MB</span><span class="md-app-date">21/10/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">20/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-play"></span>Youtube<span class="md-app-detail"><span class="md-app-size">26.47MB</span><span class="md-app-date">18/10/2014</span></span>
                </li>
            </ul>
        </div>
        <div id="menustripTabs-tab-external" class="md-tab-h tab-external">
            <ul class="md-apps-ul" style="display:none;">
                <li><span class="md-app-ic mbsc-ic mbsc-ic-calendar"></span>Calendar<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">09/09/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-earth"></span>Maps<span class="md-app-detail"><span class="md-app-size">46.21MB</span><span class="md-app-date">19/08/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">17/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-play"></span>Youtube<span class="md-app-detail"><span class="md-app-size">26.47MB</span><span class="md-app-date">16/11/2014</span></span>
                </li>
            </ul>
        </div>
        <div id="menustripTabs-tab-running" class="md-tab-h tab-running">
            <ul class="md-apps-ul" style="display:none;">
                <li><span class="md-app-ic mbsc-ic mbsc-ic-clock"></span>Clock<span class="md-app-detail"><span class="md-app-size">1.52MB</span><span class="md-app-date">16/10/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-folder"></span>File Manager<span class="md-app-detail"><span class="md-app-size">12.66MB</span><span class="md-app-date">10/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-bubble"></span>Messages<span class="md-app-detail"><span class="md-app-size">25.57MB</span><span class="md-app-date">09/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">08/11/2014</span></span>
                </li>
            </ul>
        </div>
        <div id="menustripTabs-tab-all" class="md-tab-h tab-all">
            <ul class="md-apps-ul" style="display:none;">
                <li><span class="md-app-ic mbsc-ic mbsc-ic-globe"></span>Browser<span class="md-app-detail"><span class="md-app-size">74.68MB</span><span class="md-app-date">18/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-calendar"></span>Calendar<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">17/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-camera"></span>Camera<span class="md-app-detail"><span class="md-app-size">43.11MB</span><span class="md-app-date">19/10/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-clock"></span>Clock<span class="md-app-detail"><span class="md-app-size">1.52MB</span><span class="md-app-date">10/10/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-user4"></span>Contacts<span class="md-app-detail"><span class="md-app-size">5.43MB</span><span class="md-app-date">11/08/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-copy3"></span>Docs<span class="md-app-detail"><span class="md-app-size">32.41MB</span><span class="md-app-date">19/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-folder"></span>File Manager<span class="md-app-detail"><span class="md-app-size">12.66MB</span><span class="md-app-date">18/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-image2"></span>Gallery<span class="md-app-detail"><span class="md-app-size">1.68MB</span><span class="md-app-date">17/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-earth"></span>Maps<span class="md-app-detail"><span class="md-app-size">46.21MB</span><span class="md-app-date">18/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-phone"></span>Phone<span class="md-app-detail"><span class="md-app-size">1.28MB</span><span class="md-app-date">19/11/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-foundation-mail"></span>Email<span class="md-app-detail"><span class="md-app-size">6.65MB</span><span class="md-app-date">05/07/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-bubble"></span>Messages<span class="md-app-detail"><span class="md-app-size">25.57MB</span><span class="md-app-date">06/06/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">20/10/2014</span></span>
                </li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-play"></span>Youtube<span class="md-app-detail"><span class="md-app-size">26.47MB</span><span class="md-app-date">18/11/2014</span></span>
                </li>
            </ul>
        </div>
        <div id="menustripTabs-tab-disabled" class="md-tab-h tab-disabled">
            <ul class="md-apps-ul" style="display:none;">
                <li><span class="md-app-ic mbsc-ic mbsc-ic-user4"></span>Contacts<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">17/11/2014</span></span>
                </li>
            </ul>
        </div>
    </div>
    <!-- Tab menu END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Icon and Text START -->
    <div id="demo_cont_imageIcons" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <ul mobiscroll-image="settings" mobiscroll-instance="demo" ng-model="selected" style="display:none">
            <li ng-repeat="item in data" data-val="{{item.val}}" data-icon="{{item.icon}}">
                <p>{{item.p}}</p>
            </li>
        </ul>

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Icon and Text END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Step START -->
    <div id="demo_cont_numberStep" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mynumber" mobiscroll-number="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Step END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Dialog START -->
    <div id="demo_cont_widgetDialog" class="ng-hide demo-wrapper"  ng-controller="demoController">
    
        <div ng-model="mywidget" mobiscroll-widget="settings" mobiscroll-instance="demo" style="display: none;">
            <div class="md-dialog">
                <h3 class="md-text-center">Hi Molly</h3>
                <p class="md-text-center">How are you feeling today?</p>
            </div>
        </div>

        <button ng-click="demo.show()">How are you feeling?</button>

    </div>
    <!-- Dialog END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Alert message START -->
    <div id="demo_cont_widgetMessage" class="ng-hide demo-wrapper"  ng-controller="demoController">
    
        <div ng-model="mywidget" mobiscroll-widget="settings" mobiscroll-instance="demo" style="display: none;">
            <div class="md-body">
                <h3>Use Google's location service?</h3>
                <p>Let Google help apps determine location. This meas sending anonymus location data to Google, even when no apps are running.</p>
            </div>
        </div>

        <button ng-click="demo.show()">Use Location Services?</button>

    </div>
    <!-- Alert message END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Custom Units START -->
    <div id="demo_cont_scrollerCustomunits" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myscroller" mobiscroll-scroller="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />

        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>

    </div>
    <!-- Custom Units END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Text Fields START -->
    <div id="demo_cont_formsTextfields" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <div mobiscroll-form="settings" style="display:none">
            <div class="mbsc-divider">Single-line text</div>
    
            <div>
                <label for="formsTextfields-name">Label</label>
                <input id="formsTextfields-name" type="text" placeholder="Text field label" />
            </div>
    
            <label>
            Password
            <input type="password" placeholder="Text field with icon" data-icon="lock2" />
        </label>
    
            <label>
            Password Toggle
            <input type="password" placeholder="Text field with icon" data-icon="lock2" data-password-toggle="true" />
        </label>
    
            <label>
            <input type="text" placeholder="Text field with right icon" data-icon="pencil" data-icon-align="right" />
        </label>
    
            <label>
            <input type="text" placeholder="Text field disabled" disabled/>
        </label>
    
            <label class="mbsc-err">
            <input type="text" placeholder="Text field with error style"  />
        </label>
    
            <label class="mbsc-err">
            <input type="text" placeholder="Text field with error style and message"  />
            <span class="mbsc-err-msg">Error message!</span>
        </label>
    
            <div class="mbsc-divider">Multi-line text</div>
    
            <label>
            Label
            <textarea></textarea>
        </label>
    
            <label>
            <textarea data-icon="pencil" data-icon-align="right"></textarea>
        </label>
    
            <label>
            Label
            <textarea data-icon="bubble" data-icon-align="left"></textarea>
        </label>
    
            <label>
            <textarea placeholder="disabled" disabled></textarea>
        </label>
    
            <label class="mbsc-err">
            <textarea></textarea>
            <span class="mbsc-err-msg">Error message!</span>
        </label>
        </div>
    </div>
    <!-- Text Fields END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Select START -->
    <div id="demo_cont_formsSelect" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <div mobiscroll-form="settings" style="display:none">
            <div class="mbsc-divider">Select</div>
    
            <label>
            Label
            <select class="md-select">
                <option>Select</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
            </select>
        </label>
            <label>
            <select class="md-select" data-icon="plus" data-icon-align="right">
                <option>Select with icon</option>
                <option value="opel">Opel</option>
                <option value="renault">Renault</option>
                <option value="Citroen">Citroen</option>
                <option value="Lotus">Lotus</option>
            </select>
        </label>
            <label>
            <select class="md-select" data-icon="plus" data-icon-align="left">
                <option>Select with right icon</option>
                <option value="Peugeot">Peugeot</option>
                <option value="Porsche">Porsche</option>
                <option value="Fiat">Fiat</option>
                <option value="Volkswagen">Volkswagen</option>
            </select>
        </label>
            <label class="mbsc-err">
            <select class="md-select">
                <option>Select error</option>
                <option value="Ferrari">Ferrari</option>
                <option value="Honda">Honda</option>
                <option value="Suzuki">Suzuki</option>
                <option value="Lamborghini">Lamborghini</option>
            </select>
        </label>
            <label>
            <select disabled>
                <option>Select disabled</option>
                <option value="Bentley">Bentley</option>
                <option value="Morgan">Morgan</option>
                <option value="Chevrolet">Chevrolet</option>
                <option value="Dodge">Dodge</option>
            </select>
        </label>
        </div>
    </div>
    <!-- Select END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Checkbox START -->
    <div id="demo_cont_formsCheckbox" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <div mobiscroll-form="settings" style="display:none">
            <div class="mbsc-divider">Checkbox</div>
    
            <label>
            <input type="checkbox" checked>
            Option 1
            <span class="mbsc-desc">Checked checkbox</span>
        </label>
            <label>
            <input type="checkbox">
            Option 2
            <span class="mbsc-desc">Empty checkbox</span>
        </label>
            <label>
            <input type="checkbox" disabled> 
            Option 3
            <span class="mbsc-desc">Disabled checkbox</span>
        </label>
            <label>
            <input type="checkbox" checked disabled>
            Option 4
            <span class="mbsc-desc">Disabled and checked checkbox</span>
        </label>
        </div>
    </div>
    <!-- Checkbox END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Switch START -->
    <div id="demo_cont_formsSwitch" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <div mobiscroll-form="settings" style="display:none">
            <div class="mbsc-divider">Switch</div>
    
            <label>
            <input data-role="switch" type="checkbox"> Switch Off
            <span class="mbsc-desc">This is description for Switch</span>
        </label>
    
            <label>
            <input data-role="switch" type="checkbox" checked> Switch On
            <span class="mbsc-desc">This is description for Switch 2</span>
        </label>
            <label>
            <input data-role="switch" type="checkbox" disabled> Disabled Switch Off
        </label>
            <label>
            <input data-role="switch" type="checkbox" disabled checked> Disabled Switch On
        </label>
        </div>
    </div>
    <!-- Switch END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Radio buttons START -->
    <div id="demo_cont_formsRadiobtn" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <div mobiscroll-form="settings" style="display:none">
            <div class="mbsc-divider">Radio buttons</div>
    
            <label>
            <input type="radio" name="group" checked> Radio Option 1
            <span class="mbsc-desc">This is description for radio 1</span>
        </label>
            <label>
            <input type="radio" name="group"> Radio Option 2
            <span class="mbsc-desc">This is description for radio 2</span>
        </label>
            <label>
            <input type="radio" name="group"> Radio Option 3
        </label>
            <label>
            <input type="radio" name="group" disabled> Disabled
        </label>
        </div>
    </div>
    <!-- Radio buttons END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Buttons START -->
    <div id="demo_cont_formsButtons" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <div mobiscroll-form="settings" style="display:none">
            <div class="mbsc-divider">Buttons</div>
    
            <div class="mbsc-btn-group">
                <button>Button</button>
                <button disabled>Disabled</button>
            </div>
    
            <div class="mbsc-padding">
                <button class="mbsc-btn-block">Full width button</button>
                <button class="mbsc-btn-block" disabled>Disabled full width</button>
            </div>
    
            <div class="mbsc-divider">Icons</div>
    
            <div class="mbsc-btn-group">
                <button data-icon="tag"></button>
                <button data-icon="heart"></button>
                <button data-icon="flag" disabled></button>
            </div>
            <div class="mbsc-btn-group">
                <button data-icon="tag">Tag</button>
                <button data-icon="heart">Favorite</button>
                <button data-icon="flag" disabled>Flag</button>
            </div>
    
            <div class="mbsc-divider">Flat Buttons</div>
            <div class="mbsc-btn-group">
                <button class="mbsc-btn-flat">Flat</button>
                <button class="mbsc-btn-flat" data-icon="arrow-left5">Flat & Icon</button>
                <button class="mbsc-btn-flat" data-icon="arrow-left5"></button>
                <button class="mbsc-btn-flat" data-icon="key2" disabled></button>
                <button class="mbsc-btn-flat" disabled>Flat disabled</button>
            </div>
        </div>
    </div>
    <!-- Buttons END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Typography START -->
    <div id="demo_cont_formsTypography" class="ng-hide demo-wrapper"  ng-controller="demoController" style="font-family: inherit;">
        <div mobiscroll-form="settings" mbsc-enhance>
            <div class="mbsc-padding">
                <h1>Heading 1</h1>
                <h2>Heading 2</h2>
                <h3>Heading 3</h3>
                <h4>Heading 4</h4>
                <h5>Heading 5</h5>
                <h6>Heading 6</h6>
                <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
                <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
                <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
                <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
            </div>
        </div>
    </div>
    <!-- Typography END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Slider START -->
    <div id="demo_cont_formsSlider" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <div mobiscroll-form="settings" style="display:none">
            <div class="mbsc-divider">Sound settings</div>
            <label>
            <input type="range" value="30" data-icon='{ "left": "volume-mute2", "right": "volume-high" }' />
        </label>
            <label>
            <input type="range" value="50" data-icon="alarm2" disabled />
        </label>
            <label>
            Weight
            <input type="range" value="130" min="80" max="300" data-val="left" data-template="{value} lbs" data-highlight="false" />
        </label>
            <label>
            Price
            <input type="range" value="100" min="0" max="500" step="25" data-tooltip="true" data-step-labels="[0, 100, 200, 300, 400, 500]">
            <input type="range" value="400" min="0" max="500" step="25" />
        </label>
            <label>
            Steps
            <input type="range" value="50" min="0" max="100" step="25" data-step-labels="[0, 25, 50, 75, 100]">
        </label>
            <label>
            Multiple
            <input type="range" value="100" min="0" max="3000" data-tooltip="true" data-step-labels="[0, 500, 1000, 1500, 2000, 2500, 3000]">
            <input type="range" value="500" min="0" max="3000" />
            <input type="range" value="2000" min="0" max="3000" />
            <input type="range" value="2800" min="0" max="3000" />
        </label>
        </div>
    </div>
    <!-- Slider END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Stepper START -->
    <div id="demo_cont_formsStepper" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <div mobiscroll-form="settings" style="display:none">
            <div class="mbsc-divider">Passengers</div>
            <div>
                <label for="formsStepper-md-adults">Adults</label>
                <span class="mbsc-desc">From 14 years</span>
                <input id="formsStepper-md-adults" type="number" data-role="stepper" min="1" value="1" max="15" />
            </div>
    
            <div>
                <label for="formsStepper-md-children">Children</label>
                <span class="mbsc-desc">2-14 years</span>
                <input id="formsStepper-md-children" type="number" data-role="stepper" max="15" data-val="left" />
            </div>
    
            <div>
                <label for="formsStepper-md-infant">Infant</label>
                <span class="mbsc-desc">0-2 years</span>
                <input id="formsStepper-md-infant" type="number" data-role="stepper" data-val="left" max="10" />
            </div>
    
            <label>
            Allow overweight luggage
            <input ng-model="allowOwerweight" type="checkbox">
        </label>
    
            <div>
                <label for="formsStepper-md-luggage">Luggage</label>
                <span class="mbsc-desc">(kg)</span>
                <input id="formsStepper-md-luggage" type="number" class="md-luggage" data-role="stepper" data-val="left" min="30" max="80" step="5" value="30" ng-disabled="!allowOwerweight" />
            </div>
    
            <div class="mbsc-divider">Stepper with Numpad</div>
    
            <div>
                <label for="formsStepper-md-consumption">Consumption</label>
                <div class="mbsc-desc">(mpg)</div>
                <input type="number" data-role="stepper" ng-model="consumption" data-val="left" min="5" max="120" step=".5" value="30" ng-click="numpadInst.show()" readonly />
                <div class="md-numpad" mobiscroll-numpad="numpadSettings" ng-model="consumption" mobiscroll-instance="numpadInst"></div>
            </div>
    
        </div>
    </div>
    <!-- Stepper END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Progress START -->
    <div id="demo_cont_formsProgress" class="ng-hide demo-wrapper"  class="md-progress-demo" ng-controller="demoController">
        <div mobiscroll-form="settings" style="display:none">
            <label>
            Downloading
            <progress ng-model="downloadVal" value="0" max="100" data-icon='{ "left": "cloud-download" }' data-val="right" mobiscroll-progress></progress>
        </label>
    
            <div class="mbsc-btn-group">
                <button class="mbsc-btn md-restart" ng-click="startDownload()">Restart</button>
            </div>
    
            <label>
            Processing
            <progress ng-model="processVal" value="0" max="100" data-step-labels="[0, 25, 50, 75, 100]" mobiscroll-progress></progress>
        </label>
    
            <div class="mbsc-btn-group">
                <button class="mbsc-btn" ng-click="updateProgress()">Update progress</button>
            </div>
    
            <div class="mbsc-divider">Cloud upload</div>
            <label class="md-upload">
            <progress  value="0" ng-model="uploadVal" max="100" data-step-labels="[0, 33, 66, 100]" data-icon='{ "left": "cloud-upload" }' mobiscroll-progress></progress>
        </label>
    
            <div class="mbsc-btn-group">
                <button class="mbsc-btn" ng-click="startUpload()">Restart upload</button>
            </div>
    
            <div class="mbsc-divider">Checkout process</div>
            <label class="md-demo">
            <progress ng-model="checkoutVal" value="0" max="100" data-step-labels="[0, 33, 66, 100]" mobiscroll-progress></progress>
        </label>
    
            <div class="mbsc-btn-group">
                <button class="mbsc-btn" ng-click="updateCheckout()">Next step</button>
            </div>
        </div>
    </div>
    <!-- Progress END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Segmented START -->
    <div id="demo_cont_formsSegmented" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <div mobiscroll-form="settings" style="display:none">
    
            <div class="mbsc-divider">Single select</div>
    
            <label>
                Day
                <input type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'day'" value="day">
            </label>
            <label>
                Week
                <input type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'radio'" value="radio">
            </label>
            <label>
                Month
                <input type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'month'" value="month">
            </label>
            <label>
                Year
                <input type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'year'" value="year">
            </label>
    
            <div class="mbsc-divider">Multiple select</div>
    
            <label>
                S
                <input type="checkbox" data-role="segmented" name="week" ng-model="week.su" disabled>
            </label>
            <label>
                M
                <input type="checkbox" data-role="segmented" name="week" ng-model="week.mo">
            </label>
            <label>
                T
                <input type="checkbox" data-role="segmented" name="week" ng-model="week.tu">
            </label>
            <label>
                W
                <input type="checkbox" data-role="segmented" name="week" ng-model="week.we">
            </label>
            <label>
                T
                <input type="checkbox" data-role="segmented" name="week" ng-model="week.th">
            </label>
            <label>
                F
                <input type="checkbox" data-role="segmented" name="week" ng-model="week.fr">
            </label>
            <label>
                S
                <input type="checkbox" data-role="segmented" name="week" ng-model="week.sa" disabled>
            </label>
    
            <div class="mbsc-divider">Text and Icon</div>
    
            <label>
                Featured
                <input type="radio" data-role="segmented" data-icon="material-star" name="app" ng-model="app" ng-checked="app == 'featured'" value="featured">
            </label>
            <label>
                Explore
                <input type="radio" data-role="segmented" data-icon="material-explore" name="app" ng-model="app" ng-checked="app == 'explore'" value="explore">
            </label>
            <label>
                Updates
                <input type="radio" data-role="segmented" data-icon="material-system-update" name="app" ng-model="app" ng-checked="app == 'updates'" value="updates">
            </label>
    
            <div class="mbsc-divider">Icon</div>
    
            <label>
                <input type="radio" data-role="segmented" data-icon="fa-mail-reply" name="settings" ng-model="setting" ng-checked="setting == 'a'" value="a">
            </label>
            <label>
                <input type="radio" data-role="segmented" data-icon="fa-retweet" name="settings" ng-model="setting" ng-checked="setting == 'b'" value="b">
            </label>
            <label>
                <input type="radio" data-role="segmented" data-icon="star3" name="settings" ng-model="setting" ng-checked="setting == 'c'" value="c">
            </label>
            <label>
                <input type="radio" data-role="segmented" data-icon="cogs" name="settings" ng-model="setting" ng-checked="setting == 'd'" value="d">
            </label>
    
            <div class="mbsc-divider">Disabled</div>
    
            <label>
                Idividual
                <input type="radio" data-role="segmented" name="org" ng-model="org" ng-checked="org == 'ind'" value="ind" disabled>
            </label>
            <label>
                Team
                <input type="radio" data-role="segmented" name="org" ng-model="org" ng-checked="org == 'team'" value="team" disabled disabled>
            </label>
            <label>
                Company
                <input type="radio" data-role="segmented" name="org" ng-model="org" ng-checked="org == 'company'" value="company" disabled disabled>
            </label>
    
        </div>
    </div>
    <!-- Segmented END -->
    <!-- ------------------------------------------------------------------------------- -->

</body>

</html>
